<!-- 对 divider 组件的编辑 -->
<template>
  <div class="products-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row>
              <el-col :span="12">
                <PaddingTop :defValue="data.config.paddingTop" :chgValue="(d)=>{data.config.paddingTop = d}" />
              </el-col>
              <el-col :span="12">
                <PaddingBottom :defValue="data.config.paddingBottom" :chgValue="(d)=>{data.config.paddingBottom = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="显示列数" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.column" placeholder="请选择">
                      <el-option v-for="item in 11" :key="item + 1" :label="item + 1" :value="item +1">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="图片比例" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.ratio" placeholder="请选择">
                      <el-option label="1:1" :value="'1:1'"></el-option>
                      <el-option label="4:3" :value="'4:3'"></el-option>
                      <el-option label="3:4" :value="'3:4'"></el-option>
                      <el-option label="3:2" :value="'3:2'"></el-option>
                      <el-option label="2:3" :value="'2:3'"></el-option>
                      <el-option label="16:9" :value="'16:9'"></el-option>
                      <el-option label="9:16" :value="'9:16'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                 <el-form :label-width="'120px'">
                  <el-form-item label="图片截断" style="margin-bottom:0px;">
                    <el-select size="mini" style="width:130px;" v-model="data.config.truncation" placeholder="请选择">
                      <el-option label="非截断" :value="0"></el-option>
                      <el-option label="截断" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="懒加载" style="margin-bottom:0px;">
                    <el-select size="mini" style="width:120px;" v-model="data.config.islazyload" placeholder="请选择">
                      <el-option label="关闭" :value="0"></el-option>
                      <el-option label="开启" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <TextAlign :defValue="data.config.title.textAlign" title="标题简介位置"
                  :chgValue="(d)=>{data.config.title.textAlign = d}" />
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="选取样式" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.theme" placeholder="请选择">
                      <el-option label="行、列显示" :value="'1'"></el-option>
                      <el-option label="轮换标题下" :value="'2'"></el-option>
                      <el-option label="轮换标题内" :value="'3'"></el-option>
                      <el-option label="浮在图片底" :value="'4'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="链接打开方式" style="margin-bottom:0px;">
                    <el-select style="width:160px;" size="mini" v-model="data.config.linkTarget" placeholder="请选择">
                      <el-option label="当前页面跳转" :value="'_self'"></el-option>
                      <el-option label="新打开页面跳转" :value="'_blank'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'" v-if="hasAnimate">
                  <el-form-item label="交互动画" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.animate" placeholder="请选择">
                      <el-option v-for="(item, index) in themes" :key="index" :label="item.title"
                        :value="item.theme">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="标题显示" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.titleShow" placeholder="请选择">
                      <el-option label="不显示" :value="0"></el-option>
                      <el-option label="显示" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div v-if="isShowTitle">
                  <FontFamily :defValue="data.config.title.fontFamily" title="标题字体"
                  :chgValue="(d)=>{data.config.title.fontFamily = d}" />
                  <FontSize :defValue="data.config.title.fontSize" title="标题字体大小"
                  :chgValue="(d)=>{data.config.title.fontSize = d}" />
                  <Color :defValue="data.config.title.color" title="标题字体颜色"
                  :chgValue="(d)=>{data.config.title.color = d}" />
                  <FontWeight :defValue="data.config.title.fontWeight" title="标题字体加粗"
                  :chgValue="(d)=>{data.config.title.fontWeight = d}" />
                  <FontStyle :defValue="data.config.title.fontStyle" title="标题字体倾斜"
                  :chgValue="(d)=>{data.config.title.fontStyle = d}" />
                </div>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'120px'">
                  <el-form-item label="简介显示" style="margin-bottom:0px;">
                    <el-select style="width:120px;" size="mini" v-model="data.config.infoShow" placeholder="请选择">
                      <el-option label="不显示" :value="0"></el-option>
                      <el-option label="显示" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div v-if="isShowInfo">
                  <FontFamily :defValue="data.config.info.fontFamily" title="简介字体"
                  :chgValue="(d)=>{data.config.info.fontFamily = d}" />
                  <FontSize :defValue="data.config.info.fontSize" title="简介字体大小"
                  :chgValue="(d)=>{data.config.info.fontSize = d}" />
                  <Color :defValue="data.config.info.color" title="简介字体颜色"
                  :chgValue="(d)=>{data.config.info.color = d}" />
                  <FontWeight :defValue="data.config.info.fontWeight" title="简介字体加粗"
                  :chgValue="(d)=>{data.config.info.fontWeight = d}" />
                  <FontStyle :defValue="data.config.info.fontStyle" title="简介字体倾斜"
                  :chgValue="(d)=>{data.config.info.fontStyle = d}" />
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="系统选取" name="2">
            <ChooseProductSystemData :changeQuoteSystemInput="d=>{quoteSystemInput =  d.join(' ')}"
              ref="chooseProductSystemData" :quoteSystem="quoteSystem" />
          </el-tab-pane>
          <!-- <el-tab-pane label="交互动画" name="3" v-if="hasAnimate">
            <el-form :label-width="'120px'" @submit.native.prevent>
              <el-form-item label="当前交互动画" style="margin-bottom:0px;">
                <el-input size="mini" style="width:260px;" :disabled="true" v-model="styleTypeInput" maxlength="12">
                  </el-input>
              </el-form-item>
            </el-form>
            <div class="iframe" v-loading="iframeLoading">
              <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:424px;" ref="iframeRender"></iframe>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import ChooseProductSystemData from '@/components/common/design/dialog/component/products/ChooseProductSystemData.vue'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
// import crypto from '@/core/crypto.js'
// import Global from '@/config/global.js'
// import qs from 'qs'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    styleTypeInput () {
      return '编号：' + this.data.config.animate
    },
    isShowInfo () {
      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
      return parseInt(this.data.config.infoShow) > 0
    },
    isShowTitle () {
      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
      return parseInt(this.data.config.titleShow) > 0
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTPRODUCTS, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      // ....
      this.quoteSystem = bjComponent._other.quoteSystem
      if (!this.quoteSystem || !this.quoteSystem.type) {
        this.quoteSystem = {
          type: 1,
          quotePageId: 0,
          quoteSystemId: 0,
          quoteSystemCategoryId: 0,
          topCount: 4,
          quoteSystemItemIds: '',
          remark: ''
        }
      }

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
        if (this.$refs['chooseProductSystemData']) {
          this.$refs['chooseProductSystemData'].open()
        }
      })

      // this.iframeStyle = {
      //   width: 825,
      //   row: 2,
      //   col: 4,
      //   compname: 'component_product',
      //   theme: this.$store.state.site.config.theme,
      //   color: this.$store.state.site.config.color,
      //   ttextalign: 'center',
      //   tcolor: '#888',
      //   now: new Date().getTime()
      // }
      // this.iframeStyle.token = crypto.en(JSON.stringify(this.iframeStyle))
      // let query = qs.stringify(this.iframeStyle)
      // this.iframeSrc = '/api/udin/product?' + query
      // iframe 加载完成后回调的方法，
      // let funcname = WindowType.API_UDIN_COMPONENT_ONLOAD_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      // window[funcname] = () => {
      //   this.iframeLoading = false
      //   // 调用 iframe 中的 render 方法进行渲染
      //   this.$refs['iframeRender'].contentWindow.render(this.data.config.animate, {
      //     // demo 图片
      //     imageSrc: Global.demoImage,
      //     // 图片组件对应的样式以及caption说明文字
      //     themes: [
      //       { theme: '1', caption: '效果' },
      //       { theme: '5', caption: '移入放大' },
      //       { theme: '6', caption: '移入缩小' },
      //       { theme: '25', caption: '移入左移' },
      //       { theme: '3', caption: '移入上移' },
      //       { theme: '11', caption: '移入朦胧出现' },
      //       { theme: '22', caption: '移入查看图标' },
      //       { theme: '24', caption: '移入阴影扫描' }
      //     ]
      //   })
      // }

      // 选择theme后回调的方法，并且传入选择的数据
      // let funcallbackname = WindowType.API_UDIN_COMPONENT_ONLOAD_CALLBACK_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      // window[funcallbackname] = (renderData) => {
      //   this.data.config.animate = parseInt(renderData + 1)
      // }
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      iframeLoading: true,
      iframeStyle: {},
      iframeSrc: '',
      formLabelWidth: '80px',
      name: '产品列表',
      bjComponent: null,
      data: null,
      activeName: '1',
      hasAnimate: true,
      // ...
      quoteSystem: {},
      quoteSystemInput: '',
      themes: themes
    }
  },
  watch: {
    data: {
      handler (newValue) {
        if (newValue && newValue.theme) {
          if (newValue.theme === '3' || newValue.theme === '4') {
            this.hasAnimate = false
          } else {
            this.hasAnimate = true
          }
        } else {
          this.hasAnimate = true
        }
      },
      deep: true
    }
  },
  methods: {
    // 产品数据处理
    getQuoteData (dataList) {
      let quoteData = []
      dataList.forEach(el => {
        let quote = {
          data: {
            info: '',
            title: ''
          },
          image: {
            alt: '',
            src: '',
            title: ''
          },
          link: {
            href: 'javascript:void(0)',
            target: '_self'
          }
        }
        quote.data.title = el.sproduct && el.sproduct.title ? el.sproduct.title : ''
        quote.data.info = el.sproduct && el.sproduct.info ? el.sproduct.info : ''
        quote.image.alt = el.imageFace && el.imageFace.srepertoryQuote && el.imageFace.srepertoryQuote.config ? JSON.parse(el.imageFace.srepertoryQuote.config).alt : ''
        quote.image.title = el.imageFace && el.imageFace.srepertoryQuote && el.imageFace.srepertoryQuote.config ? JSON.parse(el.imageFace.srepertoryQuote.config).title : ''
        quote.image.src = el.imageFace && el.imageFace.hrepertory ? functions.getRepertoryImageSrcByHostRepertory(el.imageFace.hrepertory) : ''
        quote.link.target = this.data && this.data.config && this.data.config.linkTarget ? this.data.config.linkTarget : '_self'
        quoteData.push(quote)
      })
      return quoteData
    },
    // .............
    close () {
      if (this.$refs['chooseProductSystemData']) {
        this.$refs['chooseProductSystemData'].close()
      }
      this.dialogShow = false
      this.iframeLoading = true
      this.iframeStyle = {}
      this.iframeSrc = ''
      this.bjComponent = null
      this.data = null
      this.activeName = '1'
      this.hasAnimate = true
      // ...
      this.quoteSystem = {}
      this.quoteSystemInput = ''
    },
    saveclose () {
      this.quoteSystem = this.$refs['chooseProductSystemData'].getQuoteSystem()
      let quoteSystemData = this.$refs['chooseProductSystemData'].getSystemItemList()
      this.data.quote = this.getQuoteData(quoteSystemData)
      this.bjComponent._other.quoteSystem = this.quoteSystem
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    ChooseProductSystemData,
    PaddingTop,
    PaddingBottom,
    FontFamily,
    FontSize,
    Color,
    FontWeight,
    FontStyle,
    TextAlign
  }
}
const themes = [
  { theme: 1, title: '无效果' },
  { theme: 2, title: '移入放大' },
  { theme: 3, title: '移入缩小' },
  { theme: 4, title: '移入左移' },
  { theme: 5, title: '移入上移' },
  { theme: 6, title: '移入朦胧出现' },
  { theme: 7, title: '移入图标查看' },
  { theme: 8, title: '移入阴影扫描' }
]
</script>

<style scoped>
.edit-container-u {
  width: 840px;
}
</style>
